<template>
  <view class="coupon-dialog flexc">
    <image
      class="coupon-img"
      src="@/subpages/static/assist_coupon_img.png"
      mode="heightFix"
    ></image>
    <view class="coupon-bg-container">
      <image
        class="coupon-bg"
        src="@/subpages/static/get_coupon_bg.png"
        mode="widthFix"
      ></image>
      <view class="info-container flexc align-center">
        <view> 助力好友 </view>
        <view class="info-desc"> 点击下面按钮为好友助力 </view>
        <view class="nick-container flexr">
          <input
            :value="nickName"
            type="nickname"
            class="nick"
            placeholder="请输入您的昵称或点击图标随机生成"
            :disable="userStore.isLogin"
          />
          <image
            v-if="!userStore.isLogin"
            class="gen"
            src="@/static/gen_nick.png"
            @click="genNick"
          ></image>
        </view>
        <view class="primary-button button" @click="emits('confirm', nickName)"
          >点击助力</view
        >
      </view>
    </view>
    <image
      class="close-dialog"
      src="@/static/close_dialog.png"
      @click="emits('cancel')"
    ></image>
  </view>
</template>
<script setup>
import { ref } from "vue";
import randomName from "@/subpages/tools/random-name";
import { useUserStore } from "@/store/user";
const emits = defineEmits(["cancel", "confirm"]);
const userStore = useUserStore();
const nickName = ref(userStore.userInfo?.customerName || "");
function genNick() {
  nickName.value = randomName.getNickName();
}
</script>
<style lang="scss">
.coupon-dialog {
  width: calc(100vw - 60rpx);
  .coupon-img {
    height: 350rpx;
    align-self: center;
    z-index: 1;
  }
  .coupon-bg-container {
    width: 100%;
    margin-top: -200rpx;
    position: relative;
    background-color: white;
    border-radius: 35rpx;
    .coupon-bg {
      width: 100%;
      opacity: 0;
    }
    .info-container {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      height: 100%;
      width: 100%;
      color: black;
      justify-content: flex-end;
      padding-bottom: 20rpx;
      font-size: 60rpx;
      box-sizing: border-box;
      .info-desc {
        font-size: 40rpx;
        color: rgba(255, 115, 183, 1);
      }
      .nick-container {
        height: 80rpx;
        border-radius: 15rpx;
        margin-top: 60rpx;
        margin-bottom: 50rpx;
        margin-left: 26rpx;
        margin-right: 26rpx;
        font-size: 30rpx;
        align-self: normal;
        border: 1px solid rgba(229, 229, 229, 1);
        .nick {
          flex: 1;
          height: 80rpx;
          padding: 0 20rpx;
        }
        .gen {
          width: 80rpx;
          height: 80rpx;
          padding: 20rpx;
          box-sizing: border-box;
        }
      }
      .button {
        background-color: rgba(255, 115, 183, 1) !important;
        align-self: normal;
        margin: 10rpx 32rpx 32rpx;
      }
    }
  }
  .close-dialog {
    width: 80rpx;
    height: 80rpx;
    align-self: center;
    margin-top: 40rpx;
  }
}
</style>